<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org"
      layout:decorator="backstage/layout">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
    <title>管理后台</title>
</head>

<body>
<div id="content" layout:fragment="content">

    <script type="text/javascript">

		function paging(page){
		    $("[name=page]").val(page);
		    $("#searchForm").submit();
		}
        $(function(){
        	
        	$('#edit_resourceId  input[name="resourceId"]').on('click',function(){
        		var sb = $(this).parent().parent().prev().prev();
        		if ($(this).prop('checked') == false){
        			$(this).prop('checked',false);
    				$(this).next().next().find('input[name="resourceId"]').prop('checked',false);
    				var num = 0
    				$.each(sb.parent().children().children().children('input[name="resourceId"]'),function(i,val){
    					if ($(val).prop('checked') == true){
    						num = num+1;
    					}
    				});
    				if(num == 0){
    					sb.prop('checked',false);
    				}
        		}else{
        			$(this).prop('checked',true);
	        		if(sb.attr('name')=='resourceId'){
	        			sb.prop('checked',true);
	        		}
	        		$(this).next().next().find('input[name="resourceId"]').prop('checked',true);
        		}
        	});

        	
            var options = {
                    currentPage: $("[name=page]").val(),
                    totalPages: $("[name=totalPage]").val(),
                    alignment:"left",
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    pageUrl: function(type,page,current){
                        return "javascript:paging('"+page+"');";
                    }
                }
                $('#example').bootstrapPaginator(options);
             $(".btn-danger").click(function(e){
                if(confirm("确定删除吗?"))
                {
                    $.ajax({
                        url:'/sysRole/delete.json?id='+ e.currentTarget.id,
                        type:'POST',
                        dataType:"json",
                        success:function(date) {
                            if(date.obj){
                                $(".close").click();
                                alert("删除成功！");
                                window.location.href = "/sysRole/list.htm";
                            }else{
                               alert("删除有误！");
                                window.location.href = "/sysRole/list.htm";
                            }
                        }
                    });
                }
            }); 
            
            //选中查询前的状态
            //$("#status option[value="+$('#status_value').val()+"]").attr("selected", "true");
            
            $('.editLanguageBT').click(function(e){
                e.preventDefault();
                $("[name = resourceId]:checkbox").prop("checked", false);
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("[name = resourceId]:checkbox").prop("checked", false);
                $("#edit_roleName").val($("#roleName-"+e.currentTarget.id).val());
                $("#edit_roleDescription").val($("#roleDescription-"+e.currentTarget.id).val());
                
                var resourceId = $("#resourceId-"+e.currentTarget.id).val();
                if(resourceId != ""){
                	var resourceIds = new Array();
                	resourceIds = $("#resourceId-"+e.currentTarget.id).val().split(",");
                	$.each(resourceIds, function(key, val) {
                	   $("[name = resourceId]:checkbox[value="+val+"]").prop("checked", true);
                	});
                }
                
               
                $("#edit_id").val(e.currentTarget.id);
                $('#editModel').modal('show');
            });

            //添加角色前
            $(".btn-setting").click(function(e){
                $(".error").removeClass().addClass("control-group");
                $(".help-inline").remove();
                $("#add_roleName").val('');
                $("#add_roleDescription").val('');
                $("#add_resourceId .focused").removeAttr("checked");
            })
            
            $("#updateSysRole").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	roleName : {
                        required: true,
                        maxlength:10,
                        remote:{
                            url: "/sysRole/checkRoleName.json",
                            type: "post",
                            data:{
                                id: function() { return $("#edit_id").val()},
                                roleName: function(){return $("#edit_roleName").val();}
                            }
                        }
                    },
                    roleDescription : {
                    	maxlength:100
                    }
                },
                messages : {
                	roleName : {
                        required : "必须填写",
                        maxlength : "最多输入10个字符",
                        remote: "输入的角色名已存在"
                    },
                    roleDescription : {
                    	maxlength:"最多输入100个字符"
                    }
                },
                submitHandler : function(form) {
                    var length=$("#edit_resourceId input[name='resourceId']:checked").length;
                    if(length==0){
                        alert("请选择角色权限!");
                        return false;
                    }
                	$("#updateSysRole").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("修改成功了！");
                            $(".close").click();
                            window.location.href = "/sysRole/list.htm";
                        } else{
                        	alert("修改失败了！");
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $("#addSysRole").validate( {
                checkStart : true,
                errorElement: 'span',
                errorClass: 'help-inline',
                focusInvalid: false,
                rules : {
                	roleName : {
                        required: true,
                        maxlength:10,
                        remote:{
                            url: "/sysRole/checkRoleName.json",
                            type: "post",
                            data:{
                                roleName: function(){return $("#add_roleName").val();}
                            }
                        }
                    },
                    roleDescription : {
                    	maxlength:100
                    }
                },
                messages : {
                	roleName : {
                        required : "必须填写",
                        maxlength : "最多输入10个字符",
                        remote: "输入的角色名已存在"
                    },
                    roleDescription : {
                    	maxlength:"最多输入100个字符"
                    }
                },
                submitHandler : function(form) {
                    var length=$("#add_resourceId input[name='resourceId']:checked").length;
                    if(length==0){
                        alert("请选择角色权限!");
                        return false;
                    }
                    $("#addSysRole").ajaxSubmit(function(date,res,me){
                        if(date.suc){
                            alert("保存成功了！");
                            window.location.href = "/sysRole/list.htm";
                        } else{
                        	alert("保存失败了！");
                        }
                    });
                },
                highlight: function (e) {
                    $(e).closest('.control-group').removeClass('info').addClass('error');
                }
            });
            
            $(".btn-inverse").click(function(e){
                $("#page").attr("value","1");
            })
        });
        
        function addShow(){
        	$("[name = resourceId]:checkbox").prop("checked", false);
        	 $('#myModal').modal('show');
        }
    </script>
    <div class="box-content">
        <div class="row-fluid sortable">
            <div class="box span12">
            
                <h3 class="row-fluid header smaller lighter blue">
                   <span class="label label-large label-pink arrowed-right">角色管理</span>
                </h3>
                <h3 class="row-fluid header smaller lighter blue" style="border:none;">
                    <a href="javascript:void(0)" class="btn btn-small btn-success btn-setting" data-toggle="modal" onclick="addShow()"><i class="icon-user"></i>新建角色</a>
                </h3>
                
                <form action="/sysRole/list.htm" method="post" id="searchForm" style="margin-left:10px;">
		            <input type="hidden" id="page" name="page" th:value="${page.page}" />
		            <input type="hidden"  name="totalPage" th:value="${page.totalPage}" />
		            <input type="hidden" id="myUserId" th:value="${session.myUserId}" />
		            
		            	<span class="topword">角色名称：</span><input type="text" class="input-xlarge focused" name="roleName" th:value="${page.filter[roleName]}"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		            <input type="submit" class="btn btn-info btn-inverse tpbtn" value="搜索"/>		
		        </form>
        
                <div class="box-content">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr >
                           
                            <th style="text-align: center;">序号</th>
                            <th style="text-align: center;">角色名称</th>
                            <th style="text-align: center;">创建时间</th>
                            <th style="text-align: center;">操作管理</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="role:${page.result}">
                        	<td th:text="${role.id}" style="text-align: center;"></td>
                            <td th:text="${role.roleName}" style="text-align: center;"></td>
                            <td th:text="${role.createTime}" style="text-align: center;"></td>
                            <td style="text-align: center;">
                                 <a class="deletebtn btn btn-small btn-danger" th:id="${role.id}" style="width: 26px;">
                                    删除
                                   
                                </a> 
                                 <a class="editbtn btn btn-info btn-small editLanguageBT" th:id="${role.id}" style="width: 26px;">
                                  
                            编辑 
                                                                                                                     
                                </a>
                                
                            <input type="hidden" th:id="'roleName-'+${role.id}" th:value="${role.roleName}"/>
                            <input type="hidden" th:id="'roleDescription-'+${role.id}" th:value="${role.roleDescription}"/>
                            <input type="hidden" th:id="'resourceId-'+${role.id}" th:value="${role.resourceId}"/>
                            <input type="hidden" th:id="'createTime-'+${role.id}" th:value="${role.createTime}"/>
                            <input type="hidden" th:id="'createUser-'+${role.id}" th:value="${role.createUser}"/>
                            <input type="hidden" th:id="'updateTime-'+${role.id}" th:value="${role.updateTime}"/>
                            <input type="hidden" th:id="'updateUser-'+${role.id}" th:value="${role.updateUser}"/>
                                
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div style="margin-bottom: 0px; margin-left: auto;margin-right: auto">
		                <div id="example" style="margin-bottom:0px"></div>
		            </div>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div>
    <div id="myModal" class="modal hide fade in">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>新增角色</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/sysRole/addOrUpdate.json" method="post" id="addSysRole">
            <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">角色名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="roleName" id="add_roleName"/>
                        </div>
                    </div>
                    
                    <div class="control-group">
                        <label class="control-label">角色描述：</label>
                        <div class="controls">
                            <textarea class="input-xlarge focused"  type="text" value="" name="roleDescription" id="add_roleDescription" style="resize:vertical;"/>
                        </div>
                    </div>
                    
                    <div class="control-group" id="add_resourceId">
                        <label class="control-label">角色权限：</label>
                        <div class="controls" th:each="resources : ${NodeResources}">
                            <input class="input-xlarge focused"  type="checkbox" th:value="${resources.id}" name="resourceId" /> <span th:text="${resources.resourceName}"></span>
                       		<span th:if="${not #lists.isEmpty(resources.childList)}">
                       		<div class="controlsin" style="margin-left:20px;" th:each="resource : ${resources.childList}">
                       			<input class="input-xlarge focused"  type="checkbox" th:value="${resource.id}" name="resourceId" /> <span th:text="${resource.resourceName}"></span>
                       		</div>
                       		</span>
                        </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
    
    
    <div id="editModel" class="modal hide fade in" style="display: none;">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">×</button>
            <h3>编辑角色</h3>
        </div>
        <form class="form-horizontal" style="margin: 0" action="/sysRole/addOrUpdate.json" method="post" id="updateSysRole">
             <input id="edit_id" name="id" type="hidden"/>
            <fieldset>
                <div class="modal-body">
                    <div class="control-group">
                        <label class="control-label">角色名称：</label>
                        <div class="controls">
                            <input class="input-xlarge focused"  type="text" value="" name="roleName" id="edit_roleName"/>
                        </div>
                    </div>
                
                    <div class="control-group">
                        <label class="control-label">角色描述：</label>
                        <div class="controls">
                            <textarea class="input-xlarge focused"  type="text" value="" name="roleDescription" id="edit_roleDescription" style="resize:vertical;"/>
                        </div>
                    </div>
                    
                    <div class="control-group" id="edit_resourceId">
                        <label class="control-label">角色权限：</label>
                       <!--  <div class="controls" th:each="resources : ${sysResourceList}">
                            <input class="input-xlarge focused"  type="checkbox" th:value="${resources.id}" name="resourceId" /> <span th:text="${resources.resourceName}"></span>
                        </div> -->
                        <div class="controls" th:each="resources : ${NodeResources}">
                            <input class="input-xlarge focused"  type="checkbox" th:value="${resources.id}" name="resourceId" /> <span th:text="${resources.resourceName}"></span>
                       		<span th:if="${not #lists.isEmpty(resources.childList)}">
                       		<div class="controlsin" style="margin-left:20px;" th:each="resource : ${resources.childList}">
                       			<input class="input-xlarge focused"  type="checkbox" th:value="${resource.id}" name="resourceId" /> <span th:text="${resource.resourceName}"></span>
                       		</div>
                       		</span>
                        </div>
                    </div>
                
                </div>    
                
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary btn-small" value="保存" />
                    <a href="#" class="btn btn-small" data-dismiss="modal">取消</a>
                </div>
            </fieldset>
        </form>
    </div>
</div>
</body>
</html>
